<template>
  <div class="right-top">
    <dv-border-box-13>
      <Swiper :autoPlay="true" :showIndicator="false" interval="6000" duration="400">
        <Slide v-for="(item, index) in items" :key="index">
          <title-bar :data="{name: item.name}"></title-bar>
          <dv-scroll-ranking-board :config="item.config" class="list my-swiper" />
        </Slide>
      </Swiper>
    </dv-border-box-13>
  </div>
</template>
<script>
import { Swiper, Slide } from 'vue-swiper-component'
export default {
  name: 'RightTop',
  components: { Swiper, Slide },
  data () {
    return {
      items: [
        {
          name: '劳动竞赛细项全行进度',
          config: {
            carousel: 'single',
            waitTime: 2000,
            unit: '%',
            data: [
              {
                name: '项目名称-1',
                value: 55
              },
              {
                name: '项目名称-2',
                value: 120
              },
              {
                name: '项目名称-3',
                value: 78
              },
              {
                name: '项目名称-4',
                value: 66
              },
              {
                name: '项目名称-5',
                value: 80
              },
              {
                name: '项目名称-6',
                value: 45
              },
              {
                name: '项目名称-7',
                value: 29
              }
            ]
          }
        },
        {
          name: '季度考核细项全行进度',
          config: {
            carousel: 'single',
            waitTime: 2000,
            unit: '%',
            data: [
              {
                name: '项目名称-1',
                value: 55
              },
              {
                name: '项目名称-2',
                value: 120
              },
              {
                name: '项目名称-3',
                value: 78
              },
              {
                name: '项目名称-4',
                value: 66
              },
              {
                name: '项目名称-5',
                value: 80
              },
              {
                name: '项目名称-6',
                value: 45
              },
              {
                name: '项目名称-7',
                value: 29
              }
            ]
          }
        }
      ]
    }
  }
}
</script>
<style lang="less">
  .right-top {
    overflow: hidden;
    height: 450px;
    .list {
      .row-item {
        height: 55px !important;
      }
    }
  }
</style>
